<template>
    <el-drawer
        v-model="isShow"
        size="50%"
        :destroy-on-close="true"
        @close="closeHandle"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <template #header="{ titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>
        <el-form :model="form"  ref="formRef" :rules="rules" v-loading="loading">
            <el-row class="mb-3" :gutter="20">
                <el-col :span="12">
                    <el-form-item label="被调警单位" required label-width="150px" prop="fromUnitId">
                        <el-tree-select
                            v-model="form.fromUnitId"
                            :data="deptOptions"
                            :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                            value-key="deptId"
                            check-strictly
                            :disabled="isDisabled"
                            style="width: 100%;"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调往单位" required label-width="150px" prop="toUnitId">
                        <el-tree-select
                            v-model="form.toUnitId"
                            :data="deptOptions"
                            :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                            value-key="deptId"
                            check-strictly
                            :disabled="isDisabled"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调警人数男" required label-width="150px" prop="userman">
                        <el-input-number :controls="false" maxlength="4" v-model="form.userman" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调警人数女" required label-width="150px" prop="userwoman">
                        <el-input-number :controls="false" maxlength="4" v-model="form.userwoman" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="到达时间" required label-width="150px" prop="userdate">
                        <el-date-picker
                            v-model="form.userdate"
                            type="datetime"
                            placeholder="请选择日期"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            style="width:100%"
                            :readonly="isDisabled"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调警天数" label-width="150px">
                        <el-input-number :controls="false" maxlength="4" v-model="form.days" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调警理由" label-width="150px" required prop="reason">
                        <el-input v-model="form.reason" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="配备车辆要求" label-width="150px">
                        <el-input v-model="form.car" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="携带装备要求" label-width="150px">
                        <el-input v-model="form.equipment" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="集合地点" required label-width="150px" prop="useraddress">
                        <el-input v-model="form.useraddress" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                
                <el-col :span="12">
                    <el-form-item label="联系人" label-width="150px">
                        <el-input v-model="form.contacts" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" label-width="150px">
                        <el-input-number :controls="false" v-model="form.contactsTel" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" label-width="150px">
                        <el-input type="textarea" :rows="3" resize="none" v-model="form.remark" :readonly="isDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="isshowpaijing" class="diaojing">
                    <!-- 搞了我好久 点击label也会触发下拉。就很恶心，现在没有了 -->
                    <el-form-item label-width="150px" required @click.stop.prevent="handleLabelClick">
                        <template #label ><span @click.stop.prevent="handleLabelClick">调警</span></template>
                        <el-select v-if="IfshowEelect" v-model="paijingData.userlist" multiple placeholder="请选择"  
                        @click="SendPoliceSelectYouHuaRef.showSendPoliceSelectYouHua(paijingData.userlist)" >
                            <el-option
                            v-for="item in SelsecPeopleoptions"
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.userId"
                            >
                            </el-option>
                        </el-select>
                        <el-select v-else v-model="paijingData.userlist" disabled multiple>
                            <el-option
                            v-for="item in SelsecPeopleoptions"
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <template v-if="isshowfjdetail">
                    <el-col :span="13">
                        <el-form-item label="法警负责人审批内容" required label-width="150px" prop="fjdetail">
                            <el-input v-model="form.fjdetail" :readonly="isEditfjdetail" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="法警负责人审批时间" label-width="150px">
                            <el-input v-model="form.fjdate" :readonly="true" />
                        </el-form-item>
                    </el-col>
                </template>
                <template v-if="isshowleaderdetail">
                    <el-col :span="13">
                    <el-form-item label="分管领导审批内容" required label-width="150px" prop="leaderdetail">
                        <el-input v-model="form.leaderdetail" :readonly="isEditleaderdetail" />
                    </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="分管领导审批时间" label-width="150px">
                            <el-input v-model="form.leaderdate" :readonly="true" />
                        </el-form-item>
                    </el-col>
                </template>
                
            </el-row>

        </el-form>
        <template #footer>
            <template v-if="isshowaddOrderPoliceBtn">
                <el-button type="primary" @click="submitHandle">提交</el-button>
            </template>
            <template v-if="isshowdepConfirmBth">
                <el-button type="primary" @click="depConfirmBth">确定并调警</el-button>
            </template>
            <template v-if="ishowforLeaderConfirmBtn">
                <el-button type="primary" @click="forLeaderConfirmBtn">提交分管领导</el-button>
            </template>
            <template v-if="ishowleaderConfirmBtn">
                <el-button type="primary" @click="leaderConfirmBtn">确定审批</el-button>
            </template>
            <el-button @click="isShow=false" style="margin-left:20px">关闭</el-button>
        </template>
        <SendPoliceSelectYouHua ref="SendPoliceSelectYouHuaRef" @userlistIds="userIdsList"  />
    </el-drawer>
</template>

<script setup>
import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance()

import { listDept, } from "@/api/system/dept";
import {OrderPoliceAdd,editOrderPolice,OrderPoliceInfo,OrderPoliceDepConfirm,OrderPoliceForLeaderConfirm,
    OrderPoliceLeaderConfirm} from "@/api/OrderPolice/OrderPolice";
import SendPoliceSelectYouHua from "@/components/SendPoliceSelect/SendPoliceSelectYouHua.vue";
import {getPoliceListApi,getPoliceAssistantListApi} from "@/api/Police.js";
const {sys_normal_disable,nj_anjian_status} = proxy.useDict('sys_normal_disable', 'nj_anjian_status')

import {getCurrentTime} from "@/utils/utils.js";

const isShow = ref(false)
// 抽屉标题
const title = ref('')
const form = ref({
    userwoman:0
})
const loading = ref(false)

const userlist = ref([])
const handleLabelClick = (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  event.preventDefault();  // 阻止默认行为
};
const SelsecPeopleoptions = ref([])

const SendPoliceSelectYouHuaRef = ref({})
const paijingData = ref({
    orderPoliceId:'',
    fjdetail:'',
    userlist:[]
})

// 各种状态
const isDisabled = ref(false)

const isshowaddOrderPoliceBtn = ref(true)
const isshowdepConfirmBth = ref(true)
const ishowforLeaderConfirmBtn = ref(true)
const ishowleaderConfirmBtn = ref(true)
const isshowpaijing = ref(true)
const IfshowEelect = ref(true)

const isshowfjdetail = ref(true)
const isEditfjdetail = ref(false)

const isshowleaderdetail = ref(true)
const isEditleaderdetail = ref(true)
const deptOptions = ref([])

const rules = {
    fromUnitId: [{ required: true, message: "被调警单位不能为空", trigger: "blur" }],
    toUnitId: [{ required: true, message: "调往单位不能为空", trigger: "blur" }],
    userman: [{ required: true, message: "调警人数男不能为空", trigger: "blur" }],
    userwoman: [{ required: true, message: " 调警人数女不能为空", trigger: "blur" }],
    reason: [{ required: true, message: " 调警理由不能为空", trigger: "blur" }],
    useraddress: [{ required: true, message: "集合地点不能为空", trigger: "blur" }],
    userdate: [{ required: true, message: "到达时间不能为空", trigger: "blur" }],
    fjdetail: [{ required: true, message: "法警负责人审批内容不能为空", trigger: "blur" }],
    leaderdetail: [{ required: true, message: "分管领导审批内容不能为空", trigger: "blur" }],
}
// 通知事件
const emit = defineEmits(['getOrderPoliceList'])
onMounted(() => {
    getDeptTree();
})
const getPoliceList = async () => {
    await getPoliceListApi().then(res => {
        SelsecPeopleoptions.value = [...SelsecPeopleoptions.value, ...res.data];
        getPoliceAssistantList()
    })
}
const getPoliceAssistantList = async () => {
    await getPoliceAssistantListApi().then(res => {
        SelsecPeopleoptions.value = [...SelsecPeopleoptions.value, ...res.data];
    })
}
/** 查询部门下拉树结构 */
function getDeptTree() {
    listDept().then(response => {
        deptOptions.value = proxy.handleTree(response.data.filter(item => item.isUnit), "deptId");
    });
};

const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const showAddOrderPolice = async (tittleV) => {
    console.log("新增调警令")
    changeShowStatus()
    title.value = tittleV
    isshowpaijing.value = false  //是否显示派警信息
    isshowaddOrderPoliceBtn.value = true  //提交按钮
    isshowdepConfirmBth.value = false     //确定并派警按钮
    ishowforLeaderConfirmBtn.value = false     //提交给按钮
    ishowleaderConfirmBtn.value = false     //分管领导确定审批按钮

    isshowfjdetail.value = false        //法警负责人审批内容及时间
    isEditfjdetail.value = true        //法警负责人审批内容是否可编辑
    
    isshowleaderdetail.value = false    //分管领导审批内容及时间
    isEditleaderdetail.value = true    //分管领导审批内容是否可编辑

    isDisabled.value = false     //是否可编辑
    
}
const showEditOrderPolice = async (data,tittleV,EditOrView,EditType) => {
    // EditType为来源。1为新增的时候编辑。2为法警负责人审批。3为分管领导审批
    title.value = tittleV
    getPoliceList()
    if(EditOrView == 'View'){
        isshowaddOrderPoliceBtn.value = false  //提交按钮
        isshowdepConfirmBth.value = false     //确定并派警按钮
        ishowforLeaderConfirmBtn.value = false     //提交给按钮
        ishowleaderConfirmBtn.value = false     //分管领导确定审批按钮
        isDisabled.value = true     //分管领导确定审批按钮
        IfshowEelect.value = false
        isEditfjdetail.value = true        //法警负责人审批内容是否可编辑
        isEditleaderdetail.value = true  //分管领导审批内容是否可编辑
        isshowpaijing.value = true  //是否显示派警信息

        isshowfjdetail.value = true        //法警负责人审批内容及时间
        isshowleaderdetail.value = true    //分管领导审批内容及时间
    }
    if(EditOrView == 'Edit'){
        
        isshowaddOrderPoliceBtn.value = true  //提交按钮
        isshowdepConfirmBth.value = false     //确定并派警按钮
        ishowforLeaderConfirmBtn.value = false     //提交给按钮
        ishowleaderConfirmBtn.value = false     //分管领导确定审批按钮
        isDisabled.value = false     //分管领导确定审批按钮

        isshowpaijing.value = false      //是否显示派警信息
        isshowfjdetail.value = false        //法警负责人审批内容及时间
        isshowleaderdetail.value = false    //分管领导审批内容及时间
    }
    if(EditType == '1'){         //新增的时候编辑
        isshowaddOrderPoliceBtn.value = true  //提交按钮
        isshowdepConfirmBth.value = false     //确定并派警按钮
        ishowforLeaderConfirmBtn.value = false     //提交给分管领导按钮
        ishowleaderConfirmBtn.value = false     //分管领导确定审批按钮
        IfshowEelect.value = true

        isshowfjdetail.value = false        //法警负责人审批内容及时间
        isshowleaderdetail.value = false    //分管领导审批内容及时间
        isEditfjdetail.value = true        //法警负责人审批内容是否可编辑
        isEditleaderdetail.value = true  //分管领导审批内容是否可编辑
    }
    if(EditType == '2'){            //=法警负责人审批
        isshowaddOrderPoliceBtn.value = false  //提交按钮
        isshowdepConfirmBth.value = true     //确定并派警按钮
        ishowforLeaderConfirmBtn.value = true     //提交给分管领导按钮
        ishowleaderConfirmBtn.value = false     //分管领导确定审批按钮
        IfshowEelect.value = true

        isshowfjdetail.value = true        //法警负责人审批内容及时间
        isEditfjdetail.value = false        //法警负责人审批内容是否可编辑

        isshowleaderdetail.value = false    //分管领导审批内容及时间
        isEditleaderdetail.value = true  //分管领导审批内容是否可编辑
        isDisabled.value = true     //是否可编辑

        isshowpaijing.value = true      //是否显示派警信息
        console.log("法警审批",form.value)
    }

    if(EditType == '3'){         //=法警负责人审批
        isshowaddOrderPoliceBtn.value = false  //提交按钮
        isshowdepConfirmBth.value = false     //确定并派警按钮
        ishowforLeaderConfirmBtn.value = false     //提交给分管领导按钮
        ishowleaderConfirmBtn.value = true     //分管领导确定审批按钮
        IfshowEelect.value = false

        isshowfjdetail.value = true        //法警负责人审批内容及时间
        isEditfjdetail.value = true        //法警负责人审批内容是否可编辑

        isshowleaderdetail.value = true    //分管领导审批内容及时间
        isEditleaderdetail.value = false  //分管领导审批内容是否可编辑
        isDisabled.value = true     //是否可编辑
        isshowpaijing.value = false      //是否显示派警信息
        
    }
    changeShowStatus()
    loading.value = true
    OrderPoliceInfo(data.orderpolice_id).then(res => {
        getDeptTree();
        form.value = res.data.info
        form.value.fromUnitId = Number(res.data.info.fromUnitId)
        form.value.toUnitId = Number(res.data.info.toUnitId)
        form.value.userman = Number(res.data.info.userman)
        form.value.userwoman = Number(res.data.info.userwoman)
        paijingData.value.orderPoliceId = res.data.info.orderpoliceId

        paijingData.value.userlist = Array.isArray(res.data.userList) ? res.data.userList.map(item => item.userId) : []
        if(EditType == '2'){ 
            if(form.value.fjdetail == '' || form.value.fjdetail == null){
                form.value.fjdetail = '同意'
            }
            const time = getCurrentTime()
            form.value.fjdate =  form.value.fjdate || time
        }   
        if(EditType == '3'){
            if(form.value.leaderdetail == '' || form.value.leaderdetail == null){
                form.value.leaderdetail = '同意'
            }
            const time = getCurrentTime()
        form.value.leaderdate =  form.value.leaderdate || time
        }
        loading.value = false
    })
}

const submitHandle = async () => {
    if(form.value.fromUnitId == form.value.toUnitId){
        proxy.$modal.msgError(`被调单位与调往单位不能相同`)
        return
    }
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            form.value.usernum = Number(form.value.userman) + Number(form.value.userwoman)
            if (form.value['orderpoliceId']) {
                editOrderPolice(form.value).then(res => {
                    changeShowStatus()
                    emit('getOrderPoliceList', '来了老弟')
                })
            } else {
                OrderPoliceAdd(form.value).then(res => {
                    changeShowStatus()
                    emit('getOrderPoliceList', '来了老弟')
                })
            }
        }   
    })
}
// 确定并调警
const depConfirmBth = async () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if(paijingData.value.userlist.length == 0){
                proxy.$modal.msgError(`调警人员不能为空`)
            }else{
                paijingData.value.fjdetail = form.value.fjdetail
                OrderPoliceDepConfirm(paijingData.value).then(res => {
                    changeShowStatus()
                    emit('getOrderPoliceList', '来了老弟')
                })
            }
        }   
    })
}
// 提交分管领导
const forLeaderConfirmBtn = async () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            paijingData.value.fjdetail = form.value.fjdetail
                OrderPoliceForLeaderConfirm(paijingData.value).then(res => {
                    changeShowStatus()
                    emit('getOrderPoliceList', '来了老弟')
                })
        }   
    })
}
// 分管领导-确定审批
const leaderConfirmBtn = async () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            paijingData.value.fjdetail = form.value.leaderdetail
            console.log(paijingData.value)
                OrderPoliceLeaderConfirm(paijingData.value).then(res => {
                    changeShowStatus()
                    emit('getOrderPoliceList', '来了老弟')
                })
        }   
    })
}

const userIdsList = async (data) => {
    console.log(data)
    paijingData.value.userlist = []
    paijingData.value.userlist = data
}

defineExpose({showAddOrderPolice,showEditOrderPolice,})
const closeHandle = () => {
    form.value = {
        userwoman:0
    }
}
</script>

<style lang="scss" scoped>
.el-input-number{width: 100%;text-align: left;}
:deep() .el-input-number .el-input__inner{text-align: left;}
.diaojing :deep() .el-tag .el-tag__close{display:none}

:deep().el-select__selected-item{margin-right: 10px;}
:deep().el-tag{max-width: 300px!important;}
</style>